לקראת סוף שנת 2015 בשרו כותרות באתרים ובלוגים שונים על "סופה הקרב מתמיד של הפלאש". הסיבה העיקרית ננעצה בהפסקת התמיכה של מוצרי הגלישה של גוגל וחברות אחרות בטכנולוגיית פלאש להצגת תכנים דינמיים ואינטראקטיביים.
בפרט, התייחסה הטענה לקבצי swf שפלאש יוצרת ומציגים את התוכן בדפדפנים תומכים. סיבות טכניות ופרצות אבטחה שנתגלו בקבצים מסוג זה הפכו אותם באמת לנטל. השאלה הראשונה שכל מעצב שיצר באנרים עם פלאש שאל, היתה: איך אצור באנרים לפרסומות באינטרנט ומה יעלה בגורלם של באנרים ישנים, ששימשו כהדרים בדפי אינטרנט כאלה ואחרים.
שני פתרונות סבירים שנוצרו בידי Google היו אמורים לאפשר מעבר חלק ל"תקופה שאחרי מותה של הפלאש".
הראשון היה Swiffy, שהוא מנוע המרה של גוגל לקבצי פלאש היוצר מערך של קבצים המאפשרים הצגת תוכן של באנר בפורמט swf כתוכן שנתמך בתקן html5. כלומר, נוצר קובץ html המכיל בתוכו אלמנט canvas המאפשר הצגת אנימציות באמצעות קבצי javascript "המציירים" באופן דינמי בשטח האלמנט. לצורך השלמת הפעולה מוצמדות ספריות javascript חיצוניות. מנוע ההמרה הזה מאפשר המרה של קבצים עד משקל מסוים, ולעיתים מבצע המרה עם תקלות ושיבושים קטנים. לפעמים.
הפתרון השני שקיים הוא Google Web Designer. תוכנה חינמית המאפשרת לצור באופן ישיר יצירה של באנרים בפורמט html5 ופועלת עם ממשק גרפי שמזכיר את הממשק הגרפי של הפלאש, ולכן לכאורה המעבר מהפלאש אל התוכנה אמור להיות קל יחסית. אבל...
מעצבים שהשתמשו בכלי האנימציה של פלאש יחושו מיד במגבלות הכלים שהתוכנה החדשה מציעה. התוכנה היא בהחלט כלי סביר וטוב, במיוחד עבור מעצבים "שלא ידעו את פלאש" ונכונים להכיר כלי חדש "שכל עתידו לפניו".
למרבה השמחה וההגיון, בחברת Adobe לא מיהרו לוותר על פלאש, וכך בגרסאות CC ניתן לבחור, עם פתיחת התכנה, ביצירה של קובץ חדש מסוג HTML5 Canvas.
העבודה עם התוכנה נשארה בדיוק אותה העבודה עם אותם הכלים, למעט תכונות מסוימות שמושבתות, מאחר ולא ניתן בשלב זה להציג אותן באמצעות התקן.
לאחר יצירת האנימציה הנדרשת, מבצעים publish לקובץ ופלאש יוצרת קובץ html יחיד עם קובץ javascript המכיל את קוד האנימציה. כמו כן נוצרות תיקיות עבור המשאבים השונים הנדרשים עבור הסרטון (תמונות, צלילים וכיו"ב).
בזאת, כמעט סיימנו.
על מנת שהבאנרים יוצגו כראוי יש צורך לבצע מספר שינויים ותוספותבקוד ה-html בהתאם לאתרים שבהם יתפרסם הבאנר ובהתאם לדפדנים השונים.
באחד הקמפיינים האחרונים שיצרנו, נעזרנו בערן ומיכאל מחברת erate, על מנת לפתור מספר שיבושים שחלו בבאנרים (כמו סרגלי גלילה שהופיעו בהם), וכן נדרשת תשומת לב רבה להנחיות גוגל ולפורמט בו מכווצים הקבצים המרכיבים את הבאנר.
על מנת לחסוך זמן ועגמת נפש נציג את השינויים הנדרשים בקוד ה-html שמייצרת הפלאש:
זהו הקוד המקורי:
לאחר התוספות:
התוספות הן:
margin: 0; לתגית body,
ו-display: block; לתגית canvas
שתי התוספות האלה פותרת את הופעתם של סרגלי הגלילה סביב לבאנר.
לקבצים שנוצרים עבור קמפיינים בגוגל נדרשים השינויים הבאים:
גוגל לא יאפשר לקריאה של קבצים חיצוניים, לכן ארבעת קבצי ה-javascript הראשונים צריכים להשמר בתיקייה תחת תיקיית העל של הבאנר וכמובן יש צורך בשינוי לכתובת יחסית של אותם קבצים בקריאה.
תוספת נוספת היא תגית meta בראש הדף המכילה פרטים על מידת הבאנר ונכתבת כך:
בזה מסתיימות למעשה הפעולות לבניית באנר html5 באמצעות פלאש.
כחלק מתהליך המיתוג מחדש ו"החייאתה" של הפלאש מתכוונת Adobe להמשיך לשווק אותה תחת השם Adobe Animate החל מראשית שנת 2016.
סטודיו אלעד מרמור - עיצוב גרפי ובניית אתרים 050-8481322 || http://www.emarmor.co.il